<template>
    <Teleport to="body">
      <!-- 遮罩层 -->
      <div
        v-if="visible || isLeaving"
        class="confirm-mask"
        :class="{ 'mask-active': visible && !isLeaving }"
        @click.self="handleMaskClick"
      ></div>
  
      <!-- 对话框 -->
      <div
        v-if="visible || isLeaving"
        class="confirm-wrapper"
        :class="{
          'dialog-active': visible && !isLeaving,
          'dialog-leave': isLeaving,
        }"
      >
        <div class="confirm-content">
          <h3 class="title">{{ title }}</h3>
          <div class="content-wrapper">
            <div v-if="message" class="message">{{ message }}</div>
            <input
              v-if="showInput"
              v-model="inputValue"
              class="confirm-input"
              type="text"
              :placeholder="inputPlaceholder"
            />
          </div>
          <div class="buttons">
            <button class="cancel-btn" @click="handleCancel">
              {{ cancelText }}
            </button>
            <button class="confirm-btn" @click="handleConfirm">
              {{ confirmText }}
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </template>
  
  <script>
  export default {
    name: "ConfirmDialog",
    props: {
      title: {
        type: String,
        default: "提示",
      },
      message: {
        type: String,
        required: true,
      },
      cancelText: {
        type: String,
        default: "取消",
      },
      confirmText: {
        type: String,
        default: "确定",
      },
      closeOnClickModal: {
        type: Boolean,
        default: false,
      },
      showInput: {
        type: Boolean,
        default: false,
      },
      inputPlaceholder: {
        type: String,
        default: "请输入",
      },
    },
    emits: ["confirm", "cancel", "closed"],
    data() {
      return {
        visible: false,
        isLeaving: false,
        inputValue: "",
      };
    },
    mounted() {
      setTimeout(() => {
        this.visible = true;
      }, 50);
    },
    methods: {
      handleConfirm() {
        this.$emit("confirm", this.showInput ? this.inputValue : null);
        this.startLeaveAnimation();
      },
      handleCancel() {
        this.$emit("cancel");
        this.startLeaveAnimation();
      },
      handleMaskClick() {
        if (this.closeOnClickModal) {
          this.handleCancel();
        }
      },
      startLeaveAnimation() {
        this.isLeaving = true;
        setTimeout(() => {
          this.visible = false;
          this.isLeaving = false;
          this.$emit("closed");
        }, 300);
      },
    },
  };
  </script>
  
  <style scoped>
  .confirm-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(64, 81, 137,.25);
    transition: opacity 0.3s ease-in-out;
    z-index: 1000;
  }
  
  .confirm-mask.mask-active {
    opacity: 1;
  }
  
  .confirm-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-20px);
    opacity: 0;
    background: var(--v-card-bg);
    border-radius: 8px;
    min-width: 300px;
    max-width: 80%;
    padding: 24px;
    z-index: 1001;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border: var(--bs-theme-color) 2px solid;
  }
  
  .confirm-wrapper.dialog-active {
    transform: translate(-50%, -50%) translateY(0);
    opacity: 1;
  }
  
  .confirm-wrapper.dialog-leave {
    transform: translate(-50%, -50%) translateY(-20px);
    opacity: 0;
    transition: all 0.2s ease-in;
  }
  
  .confirm-content .title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a2b50;
  }
  
  .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
  
  .confirm-content .message {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
  }
  
  .confirm-input {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s;
  }
  
  .confirm-input:focus {
    outline: none;
    border-color: var(--bs-theme-color);
    box-shadow: 0 0 0 2px rgba(var(--bs-theme-color-rgb), 0.1);
  }
  
  .buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  
  button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .cancel-btn {
    background-color: #f0f0f0;
    color: #666;
  }
  
  .cancel-btn:hover {
    background-color: #e0e0e0;
  }
  
  .confirm-btn {
    background-color: var(--bs-theme-color);
    color: white;
  }
  
  .confirm-btn:hover {
    filter: brightness(0.9);
  }
  </style>